<template>
  <div class="">
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="提示"
        :visible.sync="myDialogVisible"
        width="50%"
    >
      <TableFromHeader lable="选择子表" :show-name="false" @changeColData="changeColData"></TableFromHeader>
      <el-form>
        <el-form-item label="当前主表">{{ tableName + " " + toHump(tableName)}}</el-form-item>
        <el-form-item label="关联关系(例：left join sys_user_role sysUserRole.userId = sysType.id)">
          <el-input v-model="correlation"></el-input>
        </el-form-item>
      </el-form>
      <el-table
          :data="tableData.tableColEntityList"
          style="width: 100%;max-height: 400px;overflow: auto">
        <el-table-column align="center"
                         prop="colName"
                         label="列名称"
                         width="150">
        </el-table-column>
        <el-table-column align="center"
                         prop="chinaName"
                         label="展示中文名"
                         width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.chinaName" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="date"
            label="属性类型"
            width="150">
          <template slot-scope="scope">
            <el-select v-model="scope.row.paramType" placeholder="请选择">
              <el-option
                  v-for="item in paramType"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="查询配置"
            width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.compareType" placeholder="请选择">
              <el-option
                  v-for="item in compareType"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="搜索" width="80" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.searchShow"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="主表表格展示" width="80" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.tableShow"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="显示类型"
            width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.showType" placeholder="请选择">
              <el-option
                  v-for="item in showType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="sonSure">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import TableFromHeader from "./TableFromHeader";
import {message} from "../util/notice";

export default {
  name: 'AddSonTable',
  components: {TableFromHeader},
  props: {
    colData: {
      type: Object,
      default: {}
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    tableName: {
      type: String,
      default: ""
    },
  },
  watch: {
    dialogVisible: {
      handler: function (newV, oldV) {
        this.myDialogVisible = newV
      }
    }
  },
  data() {
    return {
      tableData: {
        tableComment: "",
        tableName: '',
        tableColEntityList: [],
      },
      myDialogVisible: false,
      // 关联关系
      correlation: '',
      paramType: [
        {value: "String"},
        {value: "Boolean"},
        {value: "Long"},
        {value: "Integer"}
      ],
      showType: [
        {label: "文本", value: 'text'},
        {label: "开关", value: 'switch'},
        {label: "枚举", value: 'enum'},
        {label: "图片", value: 'image'}
      ],
      compareType: [
        {value: "="},
        {value: "like"},
        {value: "eq"},
        {value: "nt"}
      ],
    }
  },
  methods: {
    close() {
      this.$emit("dismissDialog", {});
    },
    changeColData(obj) {
      console.log(obj)
      if (obj.name == this.tableName) {
        message("子表不能与主表一致", "error")
        this.tableData = {}
        return;
      }
      this.tableData = obj.res;
      this.tableData.tableName = obj.name
      this.correlation = "left join " +  this.tableData.tableName + " " + this.toHump(this.tableData.tableName) + " on " + this.toHump(this.tableData.tableName) + "."
    },
    sonSure() {
      this.myDialogVisible = false
      let param = {}
      param.tableData = this.tableData;
      param.correlation = this.correlation
      this.$emit("addSonTableList", param)
      this.tableData = []
      this.correlation = ""
    },
    toHump(name) {
      return name.replace(/\_(\w)/g, function (all, letter) {
        return letter.toUpperCase();
      });
    }

  }
}
</script>

<style scoped>

</style>
